<template>
	<div id="SSQManage">
		<table>
			<tr>
				<th>期号</th>
				<th>开奖日期</th>
				<th>中奖号码</th>
			</tr>
			<template v-if="ssqData.data.length">
				<tr v-for="(item,key) in ssqData.data" :key="key"
					@click="showDetail(item,key,$event)">
					<td>{{item.period}}</td>
					<td>233</td>
					<td>
						<span v-for="(num,index) in item.winnerNumber" :key="index"
                        :class="{winNum:true,redball:index<=5,blueball:index==6}"
                        >
                            {{num}}
                        </span>
					</td>
				</tr>
			</template>
			<transition name="cellCollapse">
                <tr ref="insertCell" v-show="show">
                    <td  colspan="3">
                        <ul class="cellHeader">
                            <template v-if="missNumber.general.length">
                                <li >
                                    <span>遗失次数</span>
                                     <span v-for="(item,key) in missNumber.general" :key="key">
                                        {{item}}
                                    </span>
                                </li>
                            </template>
                            <template v-else>
                                <li>数据为空</li>
                            </template>
                        </ul>
                    </td>
                </tr>
            </transition>
		</table>
		<el-pagination background layout="prev, pager, next"
		  :total=total style="text-align:center;margin-top:20px"
          @current-change="loadMore">
		</el-pagination>
	</div>
</template>

<script>
export default{
	data(){
	 	return{
			ssqData:{data:[]},    //储存双色球数据
			total: 1,      //页码
			show:false,
            preSelect:100,
            missNumber: {general:[]}    //遗失
	 	}
	},
	methods:{
		//页码num
        loadMore(num){
            this.show = false;
            this.loadData(10,num)
        },
        //传参:一页个数和页码
        loadData(pageSize,pageNum){
        	//获取数据
             this.$http.get(this.$apis.findByGameName,{gameName:'ssq',pageSize:pageSize,pageNo:pageNum})
            .then((resp)=>{
                this.ssqData = resp.data.data;
                this.total = resp.data.data.total;
                console.log('双色球数据在这里')
                console.log(resp.data.data)
//              console.log(resp.data.data.data[0].period)    //period
//              console.log(resp.data.data.data[0].winnerNumber)    //winnerNumber
//              console.log(resp.data.data.data[0].missNumber.general)    //missNumber
            })
        },
        //显示遗失号码
        showDetail(item,index,event){
                if(index==this.preSelect && this.show){
                    this.show = false;
                    return;
                }
                this.missNumber = item.missNumber;
                console.log(item);
                this.show = true;
                this.preSelect = index;
                this.inertAfter(event.target.parentElement,this.$refs.insertCell);
            },
            inertAfter(target,newElement){
                //如果它的下一个元素存在,则在下一元素之前插入内容
                if(target.nextElementSibling){
                    var rs = target.parentElement.insertBefore(newElement,target.nextElementSibling) 
                }else{
                    target.parentElement.appendChild(newElement)
                }
        },
	},
	//挂载后,HTML已经渲染了
	mounted(){
	 	console.log(this.$http.get(this.$apis.findByGameName,{gameName:'ssq',pageSize:10,pageNo:0}))
		this.loadData(10,0);
	}
}
</script>

<style lang="scss" scoped>
#SSQManage {
    position: absolute;
    top: 60px;
    bottom: 0;
    right: 0;
    left: 200px;
    background: white;
}
.winNum{
        width: 22px;
        height: 22px;
        display: inline-block;
        margin-left: 10px;
        border-radius: 50%;
        color: white;
        font-size: 12px;
        text-align: center;
        line-height: 22px;
    }
    .redball{
        background: #d70a0a;
    }
    .blueball{
        background: #0099ca
    }
    .cellHeader {
        display: flex;
        flex-direction: column;
        li {
            display: flex;
            flex-direction: row;
            span:nth-child(1) {
                flex:3
            }
            span {
                flex: 1;
            }
        }
    }
    .cellCollapse-enter-active,.cellCollapse-leave-active {
        transition: all .5s;
        
    }
    .cellCollapse-enter,.cellCollapse-leave-to {
        opacity: 0;
        height: 0;
    }
</style>